<!-- <script lang="ts" setup>
import { reactive, ref, shallowRef } from "vue";
import MyDialog from "@/components/MyDialog.vue";
import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";

const oCodeEditor = ref<HTMLDivElement | null>(null);
const monacoInstance = shallowRef<monaco.editor.IStandaloneCodeEditor | null>(null);
const dialog = reactive({ show: false });
const emits = defineEmits(["confirm", "cancel"]);
const open = (code: string) => {
    monacoInstance.value = monaco.editor.create(oCodeEditor.value!, { automaticLayout: true, language: "javascript" });
    monacoInstance.value.setValue(code);
    dialog.show = true;
};
const confirm = () => {
    const code = monacoInstance.value!.getValue();
    try {
        emits("confirm", code);
    } catch (err: any) {
        alert(err.message);
    }
};
defineExpose({ open, monacoInstance, dialog });
</script>

<template>
    <MyDialog v-model:show="dialog.show" :close-on-click-modal="false">
        <div class="monaco-dialog" @click.stop>
            <div ref="oCodeEditor" class="code-editor"></div>
            <div class="button-group">
                <button @click="monacoInstance?.dispose(), (monacoInstance = null), (dialog.show = false), emits('cancel')">取消</button>
                <button class="primary" @click="confirm()">继续</button>
            </div>
        </div>
    </MyDialog>
</template>

<style lang="scss" scoped>
.monaco-dialog {
    padding: 20px;
    width: 1000px;
    background-color: #fff;
    border-radius: 10px;
    row-gap: 20px;
    display: flex;
    flex-direction: column;
    .code-editor {
        height: 600px;
        box-shadow: 0 0 3px 1px #ccc;
    }
}
</style> -->
